import React from 'react';
import ConfigPageTemplate from '@components/config-page-template';
import validatorCreator from '@util/validator-creator';
import { Input } from 'antd';
import { getAreaList, addArea, updateArea, deleteArea } from '@api/asset';
import { _ } from 'core-js';

class AreaManage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      count: 0,
      search: ''
    };
  }
  componentDidMount() {
    this.loadAreas();
  }
  loadAreas = () => {};
  render() {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name'
      }
    ];
    return (
      <ConfigPageTemplate
        className="area-manage"
        name="区域"
        searchPlaceholder="请输入区域名称"
        contentColumns={columns}
        loadData={(...args) =>
          getAreaList(...args).then(res => {
            return {
              list: _.get(res, 'data.data.list', []),
              count: _.get(res, 'data.data.count', 0)
            };
          })
        }
        saveData={area => (area._id ? updateArea(area) : addArea(area))}
        deleteData={area => deleteArea(area._id)}
        disableOptRow={area => area && area.system}
        formItems={[
          {
            label: '名称',
            key: 'name',
            required: true,
            element: <Input placeholder="请输入中文、英文、特殊字符或数字，不超过32个字符" />,
            options: {
              rules: [
                {
                  validator: validatorCreator('名称', {
                    required: true
                  })
                },
                {
                  max: 32,
                  message: '您输入的内容超过32个字符限制'
                }
              ]
            }
          }
        ]}
      />
    );
  }
}

export default AreaManage;
